<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="客户" prop="customerId">
        <el-select v-model="queryParams.customerId" placeholder="请选择客户" clearable filterable size="small">
          <el-option
            v-for="dict in customerIdOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="合同年份" prop="contractYear">
        <el-date-picker
          v-model="queryParams.contractYear"
          type="year"
          placeholder="选择年"
          format="yyyy年"
          value-format="yyyy"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="季度统计" name="first">
        <el-table v-loading="loading" :data="quarterList">
          <el-table-column label="季度" align="center" prop="contractQuarter" width="160" />
          <el-table-column label="客户名称" align="center" prop="customerName" />
          <el-table-column label="合同金额" align="center" prop="totalAmount" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="月份统计" name="second">
        <el-table v-loading="loading" :data="monthList">
          <el-table-column label="月份" align="center" prop="contractMonth" width="160" />
          <el-table-column label="客户名称" align="center" prop="customerName" />
          <el-table-column label="合同金额" align="center" prop="totalAmount" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';
import {
  listSaleContractReportByMonth,
  listSaleContractReportByQuarter,
} from '@/api/saleReport/saleContractReport';

export default {
  name: 'SaleContractReport',
  setup() {
    const activeName = ref('first');
    const currentYear = new Date().getFullYear().toString();
    const loading = ref(true);
    const showSearch = ref(true);
    const monthList = ref([]);
    const quarterList = ref([]);
    const customerIdOptions = ref([]);
    const queryParams = reactive({
      customerId: null,
      contractYear: currentYear,
      contractQuarter: null,
      contractMonth: null,
    });

    const getList = () => {
      loading.value = true;
      listSaleContractReportByMonth(queryParams).then(response => {
        monthList.value = response.rows;
        const customerName = customerIdOptions.value.find(
          dict => dict.dictValue === queryParams.customerId?.toString()
        )?.dictLabel || '';
        if (customerName) {
          monthList.value.forEach(item => {
            item.customerName = customerName;
          });
        }
        loading.value = false;
      });

      listSaleContractReportByQuarter(queryParams).then(response => {
        quarterList.value = response.rows;
        const customerName = customerIdOptions.value.find(
          dict => dict.dictValue === queryParams.customerId?.toString()
        )?.dictLabel || '';
        if (customerName) {
          quarterList.value.forEach(item => {
            item.customerName = customerName;
          });
        }
      });
    };

    const handleQuery = () => {
      getList();
    };

    const resetQuery = () => {
      queryParams.customerId = null;
      queryParams.contractYear = currentYear;
      queryParams.contractQuarter = null;
      queryParams.contractMonth = null;
      handleQuery();
    };

    onMounted(() => {
      getList();
      // Replace with your method to fetch customer options
      // getQueryData('query_customer').then(res => {
      //   customerIdOptions.value = res.data;
      // });
    });

    return {
      activeName,
      loading,
      showSearch,
      monthList,
      quarterList,
      customerIdOptions,
      queryParams,
      handleQuery,
      resetQuery,
    };
  },
};
</script>
